<template>
  <div class="taskList">
    <div class="List">
      <div class="title clearfix">
        <span class="titleText">{{$t('myAdd.candyTask.candyTaskName')}}</span>
        <span class="titleNum">({{candyTaskListLeng}})</span>
        <span class="taskDetail pointer" @click="lookTaskDetail">
          <i class="icon-7"><span class="path1"></span></i>{{$t('myAdd.candyTask.rewardDetail')}}</span>
      </div>
      <ul class="clearfix">
        <li v-for="(item, index) of candyTaskList" :key="index">
          <div class="autoDiv clearfix">
            <div class="autoDiv_left">
              <p v-html="icon(item.activeType)"></p>
            </div>
            <div class="autoDiv_middle">
              <p class="taskName">{{item.activeTypeName}}</p>
              <p class="taskCont">{{item.title}}</p>
              <p class="taskReward">+ {{item.countCoin}}</p>
            </div>
            <div class="autoDiv_right">
              <template v-if="item.activeType === '1'">
                <button
                  v-if="item.getStatus=== 1"
                  @click = 'regTaskNext(item)'
                  :disabled="isDisabledReg(item.getStatus)"
                >{{regTask(1)}}</button>
                <p class="autoDiv_right_geted_btn" v-else><i class="icon-uniE946" v-show="item.getStatus === 0"></i><span>{{regTask(item.getStatus)}}</span></p>
              </template>
              <template v-else>
                <router-link
                  v-if="item.getStatus=== 0"
                  tag="button"
                  :to="routerPath(item.activeType)"
                  :disabled="isDisabledFn(item.getStatus)"
                >{{otherTaskToDoText(item.activeType)}}</router-link>
                <p class="autoDiv_right_geted_btn" v-else>
                  <i class="icon-uniE946"></i>
                  <span>
                    {{Internationalization.resultsGood}}
                  </span>
                 </p>
              </template>
              <p class="autoDiv_right_text pointer" @mouseenter="showAlertDes(item)" @mouseleave="hideAlertDes(item)">{{$t('myAdd.candyTask.ruleDes')}}</p>
            </div>
          </div>
          <div class="alertDes" v-show="item.bool">
            {{item.regulation}}
          </div>
        </li>
      </ul>
      <div class="loadWait" v-show="isShowLoad"><loadModel></loadModel></div>
    </div>
    <noData v-show="!candyTaskListLeng"></noData>
    <el-dialog
      :title= "dialogTitle"
      :flag='dialogFlag'
      name='dialogFlag'
      :width='450'
      :dialogClose='closeDialog'>
      <div slot="operation" v-show="qrCodeImgDialog">
        {{$t('myAdd.candyTask.scanCode')}}
        <span class="close" @click="closeDialog">x</span>
      </div>
      <div slot="content" v-show="qrCodeImgDialog">
        <div class="imgDiv">
          <img :src="conditionConfigImg" alt="" style="width: 100%;">
        </div>
        <div class="remarks">
          <p>{{$t('myAdd.candyTask.scanWechat')}}</p>
          <p class="remarksDetail">{{$t('myAdd.candyTask.remark')}}{{countCoin}} + {{$t('myAdd.candyTask.nickname')}}:{{userinfo.userAccount || userinfo.email}}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDialog from '@/components/common/addCommon/dialog'
import loadModel from '@/components/common/loadingModel'
import noData from '../common/noData'
export default {
  name: 'taskList',
  props: {
    candyTaskList: Array,
    candyTaskListLeng: Number,
    userinfo: Object,
    isShowLoad: Boolean
  },
  components: {
    elDialog,
    loadModel,
    noData
  },
  computed: {
    Internationalization () {
      return {
        resultsNo: this.$t('myAdd.candyTask.resultsNo'),
        resultsGood: this.$t('myAdd.candyTask.resultsGood'),
        cancel: this.$t('fund.cancel'), // 取消
        confirm: this.$t('fund.confirm'), // 确认
        inCoin: this.$t('myAdd.candyTask.inCoin'),
        received: this.$t('myAdd.candyTask.received'),
        toReceive: this.$t('myAdd.candyTask.toReceive'),
        expired: this.$t('myAdd.candyTask.expired'),
        finished: this.$t('myAdd.candyTask.finished'),
        overed: this.$t('myAdd.candyTask.overed'),
        getSucc: this.$t('myAdd.candyTask.getSucc'),
        toInvite: this.$t('myAdd.candyTask.toInvite'),
        toRealName: this.$t('myAdd.candyTask.toRealName'),
        toFullMoney: this.$t('myAdd.candyTask.toFullMoney'),
        toExchange: this.$t('myAdd.candyTask.toExchange')
      }
    }
  },
  data () {
    return {
      isDisabled: false,
      dialogFlag: false,
      qrCodeImgDialog: false,
      conditionConfigImg: '',
      dialogTitle: '',
      authNewLevel: this.userinfo.authNewLevel,
      countCoin: ''
    }
  },
  mounted () {},
  methods: {
    routerPath (val) {
      switch (val) {
        case '2':
          return '/personals/invitation?tab=invitation'
        case '3':
          return '/personals/invitation?tab=invitation'
        case '4':
          return '/personals/information?tab=information'
        case '5':
          return '/funds/funds_manage'
        case '6':
          return '/trade'
        case '7':
          return '/trade'
        case '8':
          return '/trade'
        default:
          return '/'
      }
    },
    icon (val) {
      switch (val) {
        case '1': // 注册后首次充值
          return '<i class="icon-6 regForSymbol"></i>'
        case '2': // 有效邀请即可获得奖励
          return '<i class="icon--default1 inviteForSymbol"></i>'
        case '3': // 邀请足够数量的有效用户
          return '<i class="icon-100 inviteForCoin"></i>'
        case '4': // 完成实名认证
          return '<i class="icon-5 realName"></i>'
        case '5': // 累计充值
          return '<i class="icon-uniE941 rechargeForCoin"></i>'
        case '6': // ETH首笔交易达到30个数量
          return '<i class="icon-4 exForGiftOrCoin"></i>'
        case '7': // 每天交易达到 多少数量 即可获得
          return '<i class="icon-4 exForGiftOrCoin"></i>'
        case '8': // 交易余量
          return '<i class="icon-bill exVol"></i>'
      }
    },
    isDisabledFn (status) {
      return status ? (this.isDisabled = true) : (this.isDisabled = false)
    },
    isDisabledReg (status) {
      return status !== 1 ? (this.isDisabled = true) : (this.isDisabled = false)
    },
    regTask (getStatus) {
      switch (getStatus) {
        case 0:
          return this.Internationalization.received
        case 1:
          return this.Internationalization.toReceive
        case 2:
          return this.Internationalization.expired
        case 3:
          return this.Internationalization.finished
        case 4:
          return this.Internationalization.overed
        case 5:
          return this.Internationalization.resultsGood
      }
    },
    regTaskNext (item) {
      switch (item.getStatus.toString()) {
        case '1':
          this.getTaskConfig(item)
          break
      }
    },
    // 注册送币领取
    getTaskConfig (item) {
      let id = item.id.toString()
      this.axios({
        url: this.$store.state.url.user.candy_get_config,
        params: {
          configId: id
        }
      }).then(res => {
        if (res.code.toString() === '0') {
          res = res.data
          this.dialogTitle = ''
          this.conditionConfigImg = res.conditionConfig
          this.dialogFlag = true
          this.qrCodeImgDialog = true
          this.countCoin = item.countCoin
        }
      })
    },
    // 关闭弹窗
    closeDialog () {
      this.dialogFlag = false
      this.qrCodeImgDialog = false
      this.conditionConfigImg = ''
    },
    // 根据不同任务得activeType做条件判断显示得文字
    otherTaskToDoText (key) {
      switch (key) {
        case '2':
          return this.Internationalization.toInvite
        case '3':
          return this.Internationalization.toInvite
        case '4':
          return this.Internationalization.toRealName
        case '5':
          return this.Internationalization.toFullMoney
        case '6':
          return this.Internationalization.toExchange
        case '7':
          return this.Internationalization.toExchange
        case '8':
          return this.Internationalization.toExchange
      }
    },
    // 显示任务说明
    showAlertDes (item) {
      item.bool = true
    },
    // 隐藏任务说明
    hideAlertDes (item) {
      item.bool = false
    },
    // 任务明细
    lookTaskDetail () {
      this.$emit('showTaskDetail')
    }
  }
}
</script>

